<template>
	<view class="my">
		<view class="page3" :style="{ height: webStyle.height }">
			<view class="back-box">
				<image class="icon" @tap="back" :src="imgPath + 'my/more.svg'" mode="widthFix"></image>
				<view class="right-btns"></view>
			</view>
			<view class="info">
				<view class="l">
					<view class="myImage">
						<image :src="userInfo.terHeaderImg || imgPath + 'index/my.png'" mode="widthFix" class="pic"></image>
					</view>
					<view class="userInfo">
						<view class="userName">{{ userInfo.terUsername }}</view>
						<view class="tag">
							<image :src="imgPath + 'index/vipIcon.png'" mode="widthFix" class="icon"></image>
							<view class="text">{{ userInfo.vipName || "普通用户" }}</view>
						</view>
					</view>
				</view>
				<view class="r">
					<!-- <image class="icon" :src="imgPath + 'my/more.svg'" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- 	<view class="gold">
				<view class="left">
					<view class="num">0.00</view>
					<view class="text">金币（元）</view>
				</view>
				<image class="pic" :src="imgPath + 'index/goldPic.png'" mode="widthFix"></image>
			</view> -->
			<view class="tabbar-box">
				<view class="buy-vip" v-if="0">
					<view class="buy-vip-cont">
						<image class="icon" :src="imgPath + 'my/vip.svg'" mode="widthFix"></image>
						<view class="text">成为VIP享更多福利</view>
						<view class="btn">开通VIP</view>
					</view>
				</view>
				<view class="bgi"></view>
				<view class="list">
					<view class="item" v-for="(item, index) in tabbarList" :key="index" @tap="fn(item, index)">
						<image class="icon" :src="imgPath + 'my/pic' + (index + 1) + '.png'" mode="widthFix"></image>
						<view class="text">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="cellList">
				<view class="cell-item" v-for="(item, index) in myCellList" :key="index" @tap="fn(item, index)">
					<view class="left">
						<image class="icon" :src="imgPath + 'my/' + item.icon" mode="widthFix"></image>
						<view class="text">{{ item.name }}</view>
					</view>
					<view class="right">
						<view class="cont">{{ item.rightText }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/home.js";
export default {
	data() {
		name: "My";
		return {
			imgPath: tools.imgPath,
			userInfo: {},
			getEnv: { native: true },
			systemInfo: {},
			webStyle: {
				height: ""
			},
			tabbarList: [
				{
					id: 1,
					icon: "--",
					name: "我的收益",
					fnName: "toIncome",
					payload: []
				},
				{
					id: 2,
					icon: "--",
					name: "我的算力",
					fnName: null,
					payload: []
				},
				{
					id: 3,
					icon: "--",
					name: "作品",
					fnName: null,
					payload: []
				},
				{
					id: 4,
					icon: "--",
					name: "草稿",
					fnName: null,
					payload: []
				}
			],
			myCellList: [
				{
					id: 1,
					icon: "cell1.svg",
					name: "数字资产",
					rightText: ""
				},
				{
					id: 2,
					icon: "cell2.svg",
					name: "在线客服",
					rightText: ""
				},
				{
					id: 3,
					icon: "cell3.svg",
					name: "AI交流群",
					rightText: ""
				},
				{
					id: 4,
					icon: "cell4.svg",
					name: "订单详情",
					rightText: ""
				},
				{
					id: 5,
					icon: "cell5.svg",
					name: "关于我们",
					rightText: ""
				},
				{
					id: 6,
					icon: "loginout.png",
					name: "退出登录",
					rightText: "",
					fnName: "loginOut",
					payload: [1, 2, 3]
				}
			]
		};
	},
	methods: {
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		},
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
						}
						resolve(payload);
					}
				});
			});
		},
		// 获取app版本
		appVersion() {
			const myCellList = JSON.parse(JSON.stringify(this.myCellList));
			const getAppBaseInfo = uni.getAppBaseInfo();

			myCellList.splice(myCellList.length - 1, 0, {
				id: 7,
				icon: "appid.svg",
				name: "appID",
				rightText: getAppBaseInfo.appId
			});
			myCellList.splice(myCellList.length - 1, 0, {
				id: 8,
				icon: "ver.svg",
				name: "版本号",
				rightText: getAppBaseInfo.appVersion
			});

			this.myCellList = myCellList;
		},
		// 动态函数
		fn(item, index) {
			console.log(item, index);
			if (tools.myTypeOf(this[item.fnName]) == "Function") {
				this[item.fnName](item.payload);
			}
		},
		// 登出
		loginOut(payload) {
			uni.showModal({
				title: "是否退出登录？",
				success: function (res) {
					if (res.confirm) {
						uni.removeStorageSync("token");
						uni.removeStorageSync("userInfo");
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}
				}
			});
		},
		// 页面初始化
		pageInit() {
			this.appVersion();
			this.initSystemInfo();
		},
		// 跳转我的收益
		toIncome() {
			this.toPage("/pages/income/income");
		}
	},
	onLoad() {
		this.pageInit();
	},
	onShow() {
		this.initUserInfo();
	}
};
</script>

<style lang="scss">
.my {
	.page3 {
		box-sizing: border-box;
		padding: 10vw 3vw 3vw;
		flex: 1;
		position: relative;
		overflow: auto;
		display: flex;
		flex-direction: column;
		background: linear-gradient(0deg, rgba(233, 251, 253, 0.66) 0%, rgba(233, 251, 253, 1) 52%, rgba(100, 250, 205, 0.52) 86%, rgba(102, 232, 255, 0.68) 100%);
		.back-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.icon {
				width: 3vw;
				height: 3vw;
				display: block;
				transform: rotate(180deg);
			}
		}
		.info {
			width: 100%;
			height: 36vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 3vw;
			.l {
				display: flex;
				.myImage {
					overflow: hidden;
					width: 16vw;
					height: 16vw;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #00997f;
					margin-bottom: 3vw;
					margin-right: 3vw;
					background: rgba(79, 93, 67, 0.3);

					.pic {
						width: 100%;
						height: 100%;
					}
				}
				.userInfo {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.userName {
						font-size: 40rpx;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						margin-right: 2vw;
						margin-bottom: 2vw;
					}

					.tag {
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						padding: 1vw 2vw;
						border-radius: 100vw;
						background: rgba(229, 229, 229, 0.5);

						.icon {
							width: 3vw;
							height: 3vw;
							display: block;
							margin-right: 1vw;
						}

						.text {
							font-size: 24rpx;
							color: rgba(242, 169, 34, 1);
						}
					}
				}
			}
			.r {
				padding-right: 2vw;
				.icon {
					width: 2vw;
				}
			}
		}

		.gold {
			width: 100%;
			height: 26vw;
			background: rgb(251, 234, 213);
			border-radius: 2vw;
			display: flex;
			overflow: hidden;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;

				.num {
					font-size: 10vw;
					font-weight: 400;
					letter-spacing: 0px;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					vertical-align: top;
				}

				.text {
					font-size: 5vw;
					font-weight: 400;
					letter-spacing: 0px;
					color: rgba(162, 73, 0, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.pic {
				width: 50%;
				height: 100%;
			}
		}
		.tabbar-box {
			// --top-val: 13vw;
			--top-val: 0;
			margin-top: var(--top-val);
			position: relative;
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;
			.buy-vip {
				position: absolute;
				z-index: 0;
				top: calc(0vw - var(--top-val));
				display: flex;
				width: 90%;
				height: 20vw;
				margin: 0vw;
				box-sizing: border-box;
				padding: 3vw 5vw;
				background: linear-gradient(45deg, rgba(54, 61, 33, 1) 0%, rgba(110, 121, 91, 1) 100%);
				border-radius: 2.5vw;
				.buy-vip-cont {
					width: 100%;
					display: flex;
					align-items: center;
					height: max-content;
				}
				.icon {
					width: 10vw;
				}
				.text {
					padding-left: 5vw;
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 235, 214, 0.34);
				}
				.btn {
					padding: 1.52vw 2vw;
					background: linear-gradient(160.91deg, rgba(239, 204, 152, 1) 0%, rgba(222, 174, 104, 1) 100%);
					box-shadow: inset -2px -2px 2px rgba(82, 54, 20, 0.25), inset 2px 2px 4px rgba(255, 244, 191, 0.61);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: rgba(112, 83, 54, 1);
					border-radius: 100vw;
				}
			}
			.bgi {
				position: absolute;
				left: 0vw;
				top: 0vw;
				width: 100%;
				background: #fff;
				height: 100%;
				border-radius: 3vw;
			}

			.list {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.icon {
						width: 16vw;
						margin-bottom: 2vw;
					}
					.text {
						font-size: 28rpx;
						color: rgba(66, 92, 107, 1);
					}
				}
			}
		}
		.cellList {
			margin-top: 3vw;
			flex: 1;
			border-radius: 3vw 3vw 0vw 0vw;
			box-sizing: border-box;
			padding-top: 5vw;

			.cell-item {
				width: 100%;
				height: 12vw;
				display: flex;
				align-items: center;
				background: #fff;
				border-bottom: 2px solid rgba(230, 242, 240, 1);

				.left {
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0vw 5vw;

					.icon {
						width: 5vw;
						height: 5vw;
					}

					.text {
						font-size: 3.5vw;
						color: rgba(51, 51, 51, 1);
						margin: 0px 3vw;
					}
				}

				.right {
					display: flex;
					flex: 1;
					justify-content: flex-end;

					.cont {
						font-size: 3.5vw;
						color: rgba(153, 153, 153, 1);
						margin: 0px 3vw;
					}
				}
			}
		}
	}
}
</style>
